<template>
	<div class="login-wrap">
		<el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px"
			class="demo-ruleForm login-container">
			<h3 class="title">欢迎登录教务管理系统</h3>
			<el-form-item prop="authorityUsername">
				<el-input type="text" v-model="ruleForm.authorityUsername" auto-complete="off" placeholder="账号"></el-input>
			</el-form-item>
			<el-form-item prop="authorityPassword">
				<el-input type="password" v-model="ruleForm.authorityPassword" auto-complete="off" placeholder="密码"></el-input>
			</el-form-item>
			<el-form-item style="width:100%;">
				<el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')" :loading="logining">登录
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script type="text/ecmascript-6">
	import {
		loginUser
	} from '../api/getData'
	import {
		setCookie,
		getCookie,
		delCookie
	} from '../utils/util'
	import md5 from 'js-md5'
	export default {
		name: 'loginUser',
		data() {
			return {
				//定义loading默认为false
				logining: false,
				// 记住密码
				rememberpwd: false,
				ruleForm: {
					//username和password默认为空
					authorityUsername: '',
					authorityPassword: '',
				},
				//rules前端验证
				rules: {
					username: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
				}
			}
		},
		// 创建完毕状态(里面是操作)
		created() {
			// this.$message({
			// 	message: '账号密码及验证码不为空即可',
			// 	type: 'success'
			// })
			// // 获取图形验证码
			// this.getcode()
			// // 获取存在本地的用户名密码
			// this.getuserpwd()

		},
		// 里面的函数只有调用才会执行
		methods: {
			// 获取用户名密码
			getuserpwd() {
				if (getCookie('user') != '' && getCookie('pwd') != '') {
					this.ruleForm.username = getCookie('user')
					this.ruleForm.password = getCookie('pwd')
					this.rememberpwd = true
				}
			},
			//获取info列表
			submitForm(formName) {
				console.log("执行submitForm");	
				this.$refs[formName].validate(valid => {
					console.log("表单有效")
					if (valid) {
						console.log("valid有效")
						this.logining = true
						loginUser(this.ruleForm).then(res => {
							console.log(res)
							console.log("执行loginUser")
							// if (res.code == 200) {
							if (res.message != '用户名或密码不正确') {
								console.log("提交正确账号密码")
								//如果请求成功就让他2秒跳转路由
								setTimeout(() => {
									this.logining = false
									// 缓存token
									localStorage.setItem('logintoken', res.datas.token)
									// 缓存用户个人信息
									localStorage.setItem('userdata', JSON.stringify(res.datas))
									this.$store.commit('login', 'true')
									this.$router.push({
										path: '/basedata/class'
									})
									this.$message({
										message: '登录成功',
										type: 'success'
									})
								}, 1000)
							} else {
								console.log("提交错误账号密码")
								this.logining = false
								return false
							}
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	.login-wrap {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-top: 10%;
		background-image: url();
		/* background-color: #112346; */
		background-repeat: no-repeat;
		background-position: center right;
		background-size: 100%;
	}

	.login-container {
		border-radius: 10px;
		margin: 0px auto;
		width: 350px;
		padding: 30px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		text-align: left;
		box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
	}

	.title {
		margin: 0px auto 40px auto;
		text-align: center;
		color: #505458;
	}

	.remember {
		margin: 0px 0px 35px 0px;
	}

	.code-box {
		text-align: right;
	}

	.codeimg {
		height: 40px;
	}
</style>
